<template>
	<div class="category" :style="style">
		<div class="category-body">
			<div class="category-menu" @mouseover="showMenu(null)" @mouseout="hideMenu(null)">
				<img src="@/assets/images/ui/category/category.svg" />
				<div class="text">{{t("the_category.title")}}</div>
			</div>

			<div class="category-menu-body" :class="state.isShow?'showed':''" @mouseleave="hideAllMenu">
				<div class="menu-item" v-for="(item, index) in categories"  @mouseover="showSubMenu(item)"
				    @mouseout="hideSubMenu" @click="categoryClick(item)">
					<img :src="item.icon" />
					<span class="text">{{item.title}}</span>

					<img class="arrow" src="@/assets/images/ui/category/arrow.svg"
						v-if="item.children && item.children.length>0" />
				</div>
			</div>

			<div class="category-sub-menu" v-show="state.isSubShow"  
			    @mouseenter="showAllMenu"  @mouseleave="hideAllMenu">
			   	<div class="category-sub-item" v-for="(item, index) in state.items">
					<div class="title" @click="categoryClick(item)">
						<img :src="item.icon" />
						<span class="text">{{item.title}}</span>
					</div>
					<div class="content">
						<el-row style="width:100%" v-if="item.children && item.children.length>0">
							<el-col :span="1" v-for="_item in item.children" style="height:90px;max-width:90px">
								<div class="category-element" @click="categoryClick(_item)">
									<img :src="_item.icon" />
									<span class="text">{{_item.title}}</span>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script lang="setup">
	import {
		defineComponent,
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';

	import i18n from "@/i18n/index";

	
	// 使用特殊的编译宏来指定组件的名称
	export default defineComponent({
		name: 'TheCategory',
	

		props:{			
			categories: {
				type: Object,
				default: [],
			},
			style:{
				type: String,
				default:''
			}
		},
	
		setup: (props, {
					emit
				}) => {
	
			const state = reactive({
				isShow: false,
				closable:false,
				isSubShow:false,
				activeItem: null
			})
			
			const t=i18n.global.t;

			const categoryClick = (item) => {
				state.isSubShow = false;
				state.isShow = false;

				let _item = {
					id: item.id,
					title: item.title
				}

				_item.type = "menu";
				emit("categoryClick", _item);
			}

			let handler = ref(0);

			const showMenu = (item) => {
				if (handler > 0) {
					clearTimeout(handler);
					handler = 0;
				}
				
				if (props.categories && props.categories.length>0 && item==null){
					item=props.categories[0]
				}
				if (item && item.children){
					state.items = item.children;
				}else{
					state.items=[]
				}
				
				state.activeItem=item;
				state.isShow = true;
			}

			const hideMenu = () => {
				if (handler == 0) {
					state.closable=true;
					handler = setTimeout(() => {
						if (state.closable){
							state.isShow = false;
							state.isSubShow=false;
						}
						
						if (handler > 0) {
							clearTimeout(handler);
							handler = 0;
						}
					}, 500);
				}
			}
			
			const showSubMenu = (item) => {
				state.closable=false;
				if (handler > 0) {
					clearTimeout(handler);
					handler = 0;
				}
				
				if (item && item.children){
					state.items = item.children;
					state.isSubShow = true;
				}else{
					state.items=[]
				}
			}
			
			const hideSubMenu = () => {
				if (handler == 0) {
					state.closable=true;
					handler = setTimeout(() => {
						if (state.closable){
							state.isSubShow = false;
						}
						
						if (handler > 0) {
							clearTimeout(handler);
							handler = 0;
						}
					}, 500);
				}
			}
			
			const showAllMenu = () => {
				if (handler > 0) {
					clearTimeout(handler);
					handler = 0;
				}
				
				state.isShow = true;
				state.isSubShow = true;
				state.closable=false;
				
			}
			
			const hideAllMenu = () => {
				if (handler > 0) {
					clearTimeout(handler);
					handler = 0;
				}				
				state.closable=true;
						
				handler = setTimeout(() => {
					if (state.closable){
						state.isSubShow = false;
						state.isShow = false;
					}
					
					if (handler > 0) {
						clearTimeout(handler);
						handler = 0;
					}
				}, 500);
			}
			
			return {
				state,
				t,
				categoryClick,
				showMenu,
				hideMenu,
				showSubMenu,
				hideSubMenu,
				showAllMenu,
				hideAllMenu
			}
		}
	});
</script>

<style scoped lang="scss">
	.category {
		.category-body {
			padding: 5px;
			display: flex;
			align-items: center;
			justify-content: left;
			position: relative;

			.category-menu {
				display: flex;
				align-items: center;
				margin-bottom: 15px;
				position: relative;

				&:focus {
					outline: none;
				}

				img {
					width: 32px;
					height: 32px;
					cursor: pointer;
				}

				.text {
					margin-left: 8px;
					cursor: pointer;
					text-align: right;
					font-weight: bold;
					font-size: 16px;
				}
			}

			.category-menu-body {
				position: absolute;
				top: 46px;
				left: 0px;
				z-index: 10;

				background-color: #fff;
				height: 0px;
				display: block;
				text-align: center;
				overflow: hidden;

				transition-property: height;

				transition-duration: 1s;

				transition-timing-function: ease-in;

				transition-delay: 50ms;

				&.showed {
					height: auto;

					border: 1px solid #c1c1c1;
					border-radius: 5px;
					box-shadow: 5px 5px 5px rgba(195, 193, 193, 0.34901960784313724);
				}
				
				.menu-item {

					font-size: 16px;
					//border-bottom: 1px solid #f2f2f2;
					color: #666;
					cursor: pointer;
					display: flex;
					align-items: center;
					position: relative;

					min-width: 180px;
					padding: 5px;

					&:hover {
						color: #CA3E31;
					}

					img {
						width: 32px;
						height: 32px;
						margin-right: 10px;
						object-fit: contain;
						filter: brightness(1%);
					}

					.arrow {
						position: absolute;
						right: 5px;
						height:24px;
						height:24px;
					}
				}
			}
			
			
			
			.category-sub-menu {				
				position: absolute;
				top: 46px;
				left: 191px;
				z-index: 10;
				padding:10px;
				
				background-color: #fafafa;
				height: auto;
				display: block;
				text-align: center;
				overflow: hidden;
				
				border: 1px solid #f2f2f2;
				box-shadow: 5px 5px 5px rgba(195, 193, 193, 0.34901960784313724);
												
				.category-sub-item {
					display: flex;
					flex-direction: column;
					width:100%;
							
					.title {
						width: fit-content;
						display:flex;
						margin-bottom: 5px;
						cursor: pointer;
							
						img {
							width:20px;
							height:20px;
							object-fit: contain;
							filter: brightness(1%);
						}
						
						&:hover{
							.text{
								color: #CA3E31;
							}
						}
							
						.text {
							margin-left: 5px;
							font-weight: bold;	
							font-size: 16px;
						}
					}
										
							
					.content {
						width:960px;
						height:auto;
						
						.category-element{
							display:flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							
							width:80px;
							height:90px;
							cursor:pointer;
							
							img{
								width:60px;
								height:60px;
								object-fit: contain;
							    opacity: 0.7;
							}
														
							&:hover{
								.text{
									color: #CA3E31;
								}
							}
							
							.text{
								font-size:14px;
								color: #666;
								width:100%;
								white-space: nowrap;
								/*禁止换行*/
								overflow: hidden;
								/*超出隐藏*/
								text-overflow: ellipsis;
								/*省略号*/
							
							}
						}
					}
				}
			}

		}
	}

	.category-menu {

		.menu-item {

			font-size: 16px;
			//border-bottom: 1px solid #f2f2f2;
			color: #666;
			cursor: pointer;
			display: flex;
			align-items: center;
			position: relative;

			width: 180px;
			padding: 5px;

			&:hover {
				color: #CA3E31;
			}

			img {
				width: 32px;
				height: 32px;
				margin-right: 10px;
			}

			.arrow {
				position: absolute;
				right: 5px;
			}
		}
	}

	::v-deep .el-dropdown-menu__item {
		border-bottom: 1px solid #f2f2f2;

		&:last-child {
			border: 0;
		}
	}
</style>